<script setup lang="ts">
import { getSolutionDetailByIdServer} from "@/api/solution";

onMounted(() => {
  gsap.registerPlugin(ScrollTrigger);
  setTimeout(()=>{
    startCard()
  },1000)
});
const solutionDetail = ref({
  productBannerImage:'',
  schemeFeatureList:[],
  scenarioBasedSolutionsList:[],
  schemeValueList:[],
  caseList:[],
})
const {params} = useRoute()
const router = useRouter()
 const caseLogoVosList = ref([])
const getSolutionDetail = async () => {
  const {data} =await getSolutionDetailByIdServer(params.id)
  if(data===null){
    location.replace("/404");
    return
  }
  solutionDetail.value = data
  let newChunk = []
  let caseLogoVos = data.caseLogoVos
  if(caseLogoVos){
    for (let i = 0; i < caseLogoVos.length; i += 14) {
      const chunk = caseLogoVos.slice(i, i + 14);
      newChunk.push(chunk);
    }
    caseLogoVosList.value = newChunk
  }
}
getSolutionDetail()

const startCard = () => {
  const
      HTML = document.documentElement;
  let screenWidth = HTML.clientWidth,
      screenHeight = HTML.clientHeight,
      isPortrait = window.matchMedia('(max-aspect-ratio: 11/10)').matches

  const sections = document.querySelectorAll('.ht-solution-detail-plan-intro');
  sections.forEach(section => {
    const stickyWrapper = section,
        stickyContent = section.querySelector('.sticky-content'),
        wrapper = section.querySelector('.section-wrapper'),
        cards = wrapper.querySelectorAll('.section-card'),
        cardsNumber = cards.length,
        cardWidth = cards[0].clientWidth,
        cardMargin = Number(window.getComputedStyle(cards[1]).getPropertyValue('margin-right').slice(0, -2)),
        swiperOffset =
            wrapper.getBoundingClientRect().left * 2 + cardWidth * cardsNumber + (cardMargin / 3) * (cardsNumber - 1) - screenWidth;
    // cardMargin需要调整到合适
    gsap.to(wrapper, {
      onUpdate: () => {

      },
      scrollTrigger: {
        trigger: stickyWrapper,
        start: 'top 1rem',
        end: 'bottom 100%',
        scrub: 0,
      },
      ease: 'none',
      x: -swiperOffset,
    });
  });
}

</script>

<template>
  <div class="ht-solution-detail">
    <Head>
      <Title>{{solutionDetail.title||'解决方案'}}</Title>
    </Head>
    <div class="ht-solution-detail-top" v-if="solutionDetail.productBannerImage" :style="{backgroundImage:`url(${solutionDetail.productBannerImage})`}">
      <div class="detail-top-title">{{solutionDetail.title}}</div>
      <div class="detail-top-subtitle">{{solutionDetail.subsidiaryTitle}}</div>
    </div>
    <div class="ht-solution-detail-plan-ov"  v-if="solutionDetail.id">
      <div class="ov-box">
        <div class="ov-title" v-aos="['animate__fadeInLeft']">方案概述</div>
        <div class="ov-sed-title" v-aos="['animate__fadeInLeft']">{{solutionDetail['schemeOverviewTitle']}}</div>
        <div class="ov-desc" v-aos="['animate__fadeInLeft']">
          {{solutionDetail['schemeOverview']}}
        </div>
        <img v-aos="['animate__fadeInRight']" :src="solutionDetail['schemeOverviewImage']" alt="" class="a-11">
        <img class="yh" src="~/assets/images/solution/detail/yh.png" alt="">
      </div>
    </div>
    <div class="ht-solution-detail-plan-value" v-if="solutionDetail.schemeValueList">
      <div class="plan-value-title">方案价值</div>
      <div class="plan-value-title-box">
        <Swiper
            v-if="solutionDetail.schemeValueList.length>3"
            :slides-per-view="3"
            :space-between="30"
            :modules="[SwiperAutoplay, SwiperEffectFade, SwiperPagination]"
            :loop="false"
            effect="coverflow"
            :observer="true"
            :observeParents="true"
            :autoplay="{
            delay: 6000,
            disableOnInteraction: true,
          }"
        >
          <SwiperSlide v-for="(item, index) in solutionDetail.schemeValueList" :key="index">
            <div class="plan-value-title-box-item">
              <img :src="item.iconOrImage" alt="">
              <div class="pv-item-main-desc">{{ item.title }}</div>
              <div class="pv-item-sub-desc">
                {{item.intro}}
              </div>
            </div>
          </SwiperSlide>
          <SwiperControl/>
        </Swiper>
        <template v-else>
          <div class="plan-value-title-box-item" v-for="item in solutionDetail.schemeValueList" :key="item.id">
            <img :src="item.iconOrImage" alt="">
            <div class="pv-item-main-desc">{{ item.title }}</div>
            <div class="pv-item-sub-desc">
              {{item.intro}}
            </div>
          </div>
        </template>
      </div>
    </div>
    <div class="ht-solution-detail-plan-intro" :style="{height:solutionDetail.schemeFeatureList.length*4.9+'rem'}">
      <div class="sticky-content">
        <div class="section-headline">
          <div class="left-img">
            <img :src="solutionDetail.schemeIntroImage" alt="">
          </div>
          <div class="right-content">
            <div class="title">方案介绍</div>
            <div class="desc">
              {{solutionDetail.schemeIntro}}
            </div>
          </div>
        </div>
        <div class="section-wrapper"  v-if="solutionDetail.schemeFeatureList.length">
          <div class="section-card" v-for="(item,index) in solutionDetail.schemeFeatureList">
            <div class="short-line"></div>
            <div class="main-title">{{item.title}}</div>
            <div class="main-desc">
              {{item.intro}}
            </div>
            <div class="main-page">
              <span class="current-page">{{ (index+1) > 9 ?  (index+1) : '0' +  (index+1) }}</span>
              <span>/</span>
              <span class="total-page">{{ solutionDetail.schemeFeatureList.length > 9 ? solutionDetail.schemeFeatureList.length : '0' + solutionDetail.schemeFeatureList.length }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="ht-solution-detail-architecture-diagram">
      <div class="title">架构图</div>
<!--      <div class="images-title">总部</div>-->
<!--      <img src="~/assets/images/solution/detail/jg.png" alt="">-->
      <div class="diagram-html" v-html="solutionDetail.other"></div>

    </div>
    <div class="ht-solution-detail-scenarioization">
      <div class="title">场景化解决方案</div>
      <div class="cards">
        <Swiper
            v-if="solutionDetail.scenarioBasedSolutionsList.length>3"
            :slides-per-view="3"
            :space-between="30"
            :modules="[SwiperAutoplay, SwiperEffectFade, SwiperPagination]"
            :loop="false"
            effect="coverflow"
            :observer="true"
            :observeParents="true"
            :autoplay="{
            delay: 6000,
            disableOnInteraction: true,
          }"
        >
          <SwiperSlide v-for="(item, index) in solutionDetail.scenarioBasedSolutionsList" :key="index">
            <div class="cards-item">
              <img :src="item.iconOrImage" alt="">
              <div class="index">{{index+1>9?index+1:'0'+(index+1)}}</div>
              <div class="desc">{{ item.intro }}</div>
            </div>
          </SwiperSlide>
          <SwiperControl/>
        </Swiper>
       <template v-else>
         <div class="cards-item" v-for="(item, index) in solutionDetail.scenarioBasedSolutionsList" :key="index">
           <img :src="item.iconOrImage" alt="">
           <div class="index">{{index+1>9?index+1:'0'+(index+1)}}</div>
           <div class="desc">{{ item.intro }}</div>
         </div>
       </template>

      </div>
    </div>
    <div class="ht-solution-detail-success-demos" v-if="solutionDetail.caseList&&solutionDetail.caseList.length">
      <div class="title">成功案例</div>
<!--      <div class="success-top">-->
<!--        <Swiper-->
<!--            v-if="solutionDetail.caseList&&solutionDetail.caseList.length>3"-->
<!--            :slides-per-view="3"-->
<!--            :space-between="30"-->
<!--            :modules="[SwiperAutoplay, SwiperEffectFade, SwiperPagination]"-->
<!--            :loop="true"-->
<!--            effect="coverflow"-->
<!--            :centeredSlides="true"-->
<!--            :autoplay="{-->
<!--            delay: 4000,-->
<!--            disableOnInteraction: true,-->
<!--          }"-->
<!--        >-->
<!--          <SwiperSlide v-for="(item, index) in solutionDetail.caseList" :key="index">-->
<!--            <NuxtLink :to="'/solution/'+item.id" target="_blank"  class="top-item">-->
<!--              <div class="left">-->
<!--                <img :src="item.logo" alt="">-->
<!--              </div>-->
<!--              <img class="yh" src="~/assets/images/solution/detail/yh.png" alt="">-->
<!--              <div class="right">-->
<!--                <div class="right-title" :title="item.typeName">{{item.typeName}}</div>-->
<!--                <div class="right-desc">{{item.intro}}-->
<!--                </div>-->
<!--              </div>-->
<!--            </NuxtLink>-->
<!--          </SwiperSlide>-->
<!--          <SwiperControlSolution/>-->
<!--        </Swiper>-->
<!--        <template v-else>-->
<!--          <NuxtLink :to="'/solution/'+item.id" class="top-item" target="_blank"  v-for="(item, index) in solutionDetail.caseList" :key="index">-->
<!--            <div class="left">-->
<!--              <img :src="item.logo" alt="">-->
<!--            </div>-->
<!--            <img class="yh" src="~/assets/images/solution/detail/yh.png" alt="">-->
<!--            <div class="right">-->
<!--              <div class="right-title" :title="item.typeName">{{item.typeName}}</div>-->
<!--              <div class="right-desc">{{item.intro}}-->
<!--              </div>-->
<!--            </div>-->
<!--          </NuxtLink>-->
<!--        </template>-->
<!--      </div>-->
      <Swiper
          v-if="caseLogoVosList.length"
          :slides-per-view="1"
          :space-between="0"
          :modules="[SwiperAutoplay, SwiperEffectFade, SwiperPagination]"
          :loop="true"
          effect="cube"
          :centeredSlides="true"
          :autoplay="{
            delay: 6000,
            disableOnInteraction: true,
          }"
      >
        <SwiperSlide v-for="(item, index) in caseLogoVosList" :key="index">
          <div class="success-list">
            <div class="list-item" v-for="i in item" :key="i">
              <img :src="i.logo" alt="">
            </div>
          </div>
        </SwiperSlide>
      </Swiper>

    </div>

  </div>
</template>

<style scoped lang="scss">
.ht-solution-detail {

  &-top {
    width: 24rem;
    height: 10.5rem;
    background: url(~/assets/images/solution/detail/top-bg.jpg);
    background-repeat: no-repeat;
    background-size: 24rem 10.5rem;
    padding-top: 0.1px;
    color: #fff;
    text-align: center;

    .detail-top-title {
      margin-top: 4.3rem;
      font-size: 0.8rem;
      font-weight: bold;
      margin-bottom: 0.06rem;
    }

    .detail-top-subtitle {
      font-size: 0.33rem;
      font-weight: 400;
    }
  }

  &-plan-ov {
    height: 12.08rem;
    background: #fff;
    padding-top: 2.14rem;

    .ov-box {
      width: 21.26rem;
      height: 7.48rem;
      background: #FFFFFF;
      box-shadow: 0rem 0.09rem 0.63rem 0.01rem rgba(46, 106, 255, 0.13);
      padding-left: 2.74rem;
      padding-top: 1.08rem;
      position: relative;

      .ov-title {
        border-bottom: 0.01rem solid #E1E1E1;
        width: 10.84rem;
        height: 1.7rem;
        font-size: 0.57rem;
        font-weight: bold;
      }

      .ov-sed-title {
        padding-top: 0.66rem;
        width: 10.85rem;
        height: 1.88rem;
        font-size: 0.38rem;
        font-weight: bold;
        color: #2E6AFF;
      }

      .ov-desc {
        width: 10.85rem;
        height: 2.14rem;
        font-size: 0.23rem;
        font-weight: 400;
        color: #111111;
        line-height: 0.53rem;
        overflow-y: auto;
        padding-right: 0.1rem;
        &::-webkit-scrollbar{
          width: 0.05rem;
          height: 0.05rem;
        }
        &::-webkit-scrollbar-corner {
          display: block;
        }
        &::-webkit-scrollbar-thumb {
          border-radius: 0.1rem;
          background-color: rgba(0, 0, 0, .2);
        }
        &::-webkit-scrollbar-thumb,
        &::-webkit-scrollbar-track {
          border-right-color: transparent;
          border-left-color: transparent;
          background-color: rgba(0, 0, 0, .1);
        }
      }

      .a-11 {
        position: absolute;
        top: 1.69rem;
        right: 1.51rem;
        width: 5.15rem;
        height: 6.78rem;
        border-radius: 0.13rem;
        transition: all 0.5s;

        &:hover {
          transform: scale(1.1);
        }
      }

      .yh {
        position: absolute;
        top: -0.38rem;
        right: 0.41rem;
        width: 1.31rem;
        height: 1.31rem;
      }
    }
  }

  &-plan-value {
    width: 24rem;
    height: 9.16rem;
    background: #F5F7FA;
    padding-top: 0.94rem;
    padding-left: 2.74rem;
    padding-right: 2.74rem;

    .plan-value-title {
      text-align: center;
      font-size: 0.57rem;
      font-weight: bold;
    }

    .plan-value-title-box {
      display: flex;
      margin-top: 0.89rem;

      .plan-value-title-box-item {
        width: 5.6rem;
        height: 5.43rem;
        margin-right: 0.86rem;
        background: #FFFFFF;
        border-radius: 0.19rem 0.19rem 0.19rem 0.19rem;
        padding-top: 0.68rem;
        padding-left: 0.8rem;
        padding-right: 0.8rem;

        &:nth-child(2), &:nth-child(3) {
          img {
            width: 0.7875rem;
            height: 0.925rem;
          }

        }

        img {
          width: 0.93rem;
          height: 0.89rem;
          margin-left: 1.54rem;
          margin-bottom: 0.66rem;
          object-fit: scale-down;
        }

        .pv-item-main-desc {
          font-size: 0.28rem;
          font-weight: bold;
          color: #333333;
          text-overflow: ellipsis; // 超出用省略号显示
          overflow: hidden; // 超出的文本隐藏
          display: -webkit-box; // 作为弹性伸缩盒子模型显示
          -webkit-line-clamp: 2; // 显示的行
          -webkit-box-orient: vertical;
        }

        .pv-item-sub-desc {
          margin-top: 0.36rem;
          font-size: 0.2rem;
          font-weight: 400;
          color: #111111;
          line-height: 0.38rem;
          text-overflow: ellipsis; // 超出用省略号显示
          overflow: hidden; // 超出的文本隐藏
          display: -webkit-box; // 作为弹性伸缩盒子模型显示
          -webkit-line-clamp: 4; // 显示的行
          -webkit-box-orient: vertical;
        }

        &:hover {
          box-shadow: 0rem 0.06rem 0.75rem 0.01rem rgba(46, 106, 255, 0.1);
        }

        &:last-child {
          margin-right: 0;
        }
      }
    }

  }

  &-plan-intro {
    position: relative;
    background: #fff;
    padding-top: 2.69rem;
    height: 40rem;

    .sticky-content {
      position: sticky;
      top: 1rem;
      display: flex;

      .section-headline {
        display: flex;
        height: 9.44rem;

        .left-img {
          margin-right: 1.16rem;
          margin-left: 0.8rem;

          img {
            width: 9.1rem;
            height: 9.44rem;
            background: #292929;
            border-radius: 0.19rem 0.19rem 0.19rem 0.19rem;
          }
        }

        .right-content {

          .title {
            font-size: 0.57rem;
            font-weight: bold;
            color: #111111;
          }

          .desc {
            line-height: 0.43rem;
            margin-top: 0.48rem;
            width: 10.79rem;
            font-size: 0.25rem;
            font-weight: 400;
            color: #111111;
            text-overflow: ellipsis; // 超出用省略号显示
            overflow: hidden; // 超出的文本隐藏
            display: -webkit-box; // 作为弹性伸缩盒子模型显示
            -webkit-line-clamp: 3; // 显示的行
            -webkit-box-orient: vertical;
          }
        }
      }

      .section-wrapper {
        margin-top: 3.44rem;
        margin-left: -14.5rem;
        display: flex;

        .section-card {
          width: 7rem;
          height: 6.65rem;
          background: #FFFFFF;
          border-radius: 0.19rem;
          border: 0.01rem solid #C5D7FF;
          position: relative;
          padding: 0.94rem 0.75rem 0.65rem 0.75rem;
          margin-right: 0.69rem;

          &:last-child {
            margin-right: 0;
          }

          .short-line {
            width: 0.38rem;
            border: 0.04rem solid #2E6AFF;
          }

          .main-title {
            margin-top: 0.5rem;
            font-size: 0.35rem;
            font-weight: 500;
            color: #111111;
            line-height: 0.56rem;
          }

          .main-desc {
            margin-top: 0.51rem;
            font-size: 0.2rem;
            font-weight: 400;
            color: #333333;
            line-height: 0.38rem;
            text-overflow: ellipsis; // 超出用省略号显示
            overflow: hidden; // 超出的文本隐藏
            display: -webkit-box; // 作为弹性伸缩盒子模型显示
            -webkit-line-clamp: 7; // 显示的行
            -webkit-box-orient: vertical;
          }

          .main-page {
            position: absolute;

            left: 0.75rem;
            bottom: 0.65rem;
            font-size: 0.25rem;
            font-weight: 400;
            color: #C1C1C1;

            .current-page {
              font-size: 0.38rem;
              color: #2E6AFF;
              margin-right: 0.1rem;
            }

          }
        }
      }
    }

  }

  //架构图
  &-architecture-diagram {
    padding-top: 2rem;
    position: relative;
    margin-bottom: 1.91rem;

    .title {
      text-align: center;
      font-size: 0.57rem;
      font-weight: bold;
      color: #000000;
      margin-bottom: 0.94rem;
    }

    .images-title {
      text-align: center;
      font-size: 0.23rem;
      font-weight: bold;
      color: #111111;
      line-height: 0.35rem;
      position: absolute;
      left: 0;
      right: 0;
      top: 3.8rem;
      margin: auto;
    }

    .diagram-html {
      width: 17.9rem;
      display: block;
      margin: auto;
      :deep(img){
        width: 100%;
      }
    }
  }

  &-scenarioization {
    width: 24rem;
    height: 12.01rem;
    background: #F5F7FA;
    padding: 0.89rem 1.81rem 0.83rem 1.81rem;

    .title {
      font-size: 0.57rem;
      font-weight: bold;
      text-align: center;
    }

    .cards {
      display: flex;
      margin-top: 0.94rem;
      position: relative;

      ::v-deep(.swiper) {
        position: static;
      }

      .swiper-nav {
        position: absolute;
        bottom: -1.381rem;
        left: 0;
        margin: auto;
        right: 0;
      }

      .cards-item {
        width: 6.53rem;
        height: 7.01rem;
        background: #FFFFFF;
        border-radius: 0.13rem;
        margin-right: 0.4rem;
        overflow: hidden;

        img {
          width: 6.53rem;
          height: 4.09rem;
          border-radius: 0.13rem 0.13rem 0rem 0rem;
          transition: all 0.5s;

          &:hover {
            transform: scale(1.1);
          }
        }

        .index {
          height: 0.48rem;
          display: inline-block;
          font-size: 0.3rem;
          font-weight: 500;
          color: #111111;
          border-bottom: 0.03rem solid #2E6AFF;
          margin-left: 0.5rem;
          margin-top: 0.44rem;
        }

        .desc {
          margin-top: 0.2rem;
          margin-left: 0.5rem;
          width: 5.53rem;
          font-size: 0.25rem;
          font-weight: 400;
          color: #111111;
          line-height: 0.45rem;
          text-overflow: ellipsis; // 超出用省略号显示
          overflow: hidden; // 超出的文本隐藏
          display: -webkit-box; // 作为弹性伸缩盒子模型显示
          -webkit-line-clamp: 3; // 显示的行
          -webkit-box-orient: vertical;
        }
      }
    }
  }

  &-success-demos {
    background: #fff;
    //height: 12.27rem;
    padding-top: 1.55rem;
    padding-left: 0.81rem;
    padding-bottom: 1.5rem;

    .title {
      font-size: 0.53rem;
      font-weight: bold;
      color: #111111;
      text-align: center;
      //margin-bottom: 1.1rem;
    }

    .success-top {
      width: 21.79rem;
      display: flex;
      padding-left: 1.34rem;
      padding-right: 1.34rem;
      position: relative;

      ::v-deep(.swiper) {
        position: static;
      }

      .swiper-slide-active {
        .top-item {
          display: flex;
          background: #2E6AFF url("~/assets/images/solution/detail/a-1.png") no-repeat;
          background-size: 6rem 2.58rem;

          .yh {
            opacity: 0.3;
          }

          .left {
            background: #fff;
          }

          .right {
            .right-title, .right-desc {
              color: #fff;
            }
          }
        }
      }

      .top-item {
        width: 6rem;
        height: 2.58rem;
        background: #FFFFFF;
        box-shadow: 0rem 0rem 0.39rem 0.01rem rgba(15, 85, 214, 0.07);
        border-radius: 0.13rem;
        border: 0.01rem solid rgba(0, 0, 0, 0.06);
        position: relative;
        display: flex;


        .left {
          margin-top: 0.31rem;
          width: 1.95rem;
          height: 1.95rem;
          background: #F5F8FC;
          border-radius: 100%;
          margin-left: 0.36rem;
          display: flex;
          align-items: center;
          justify-content: center;

          img {
            width: 1.23rem;
            //max-height: 1.4rem;
            object-fit: contain;
          }
        }

        .right {
          width: 2.93rem;
          margin-left: 0.39rem;
          position: relative;
          z-index: 1;
          margin-top: 0.26rem;

          .right-title {
            font-size: 0.3rem;
            font-weight: 500;
            color: #333333;
            margin-bottom: 0.43rem;
            text-overflow: ellipsis;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
          }

          .right-desc {
            font-size: 0.2rem;
            font-weight: 400;
            color: #777777;
            line-height: 0.38rem;
            overflow-y: scroll;
            height: 0.8rem;
            &::-webkit-scrollbar{
              display: none;
            }
          }
        }

        .yh {
          position: absolute;
          left: 2.7rem;
          top: 0.81rem;
          width: 0.5rem;
          transform: rotate(180deg);
          z-index: 0;
        }
      }

    }

    .success-list {
      margin-top: 0.8rem;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;

      .list-item {
        width: 3.02rem;
        height: 1.39rem;
        background: #FFFFFF;
        box-shadow: 0rem 0rem 0.25rem 0.01rem rgba(17, 93, 241, 0.08);
        border-radius: 0.1rem;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 0.43rem;
        margin-right: 0.2rem;

        &:nth-child(7n) {
          margin-right: 0;
        }

        img {
          width: 2.8rem;
          max-height: 2rem;
          object-fit: scale-down;
        }
      }
    }
  }
}
</style>
